<template>
    <div class="school">
        <div class="bj"></div>
        <div class="breadcrumb">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">
                    首页
                </el-breadcrumb-item>
                <el-breadcrumb-item>小竹学院</el-breadcrumb-item>
                <el-breadcrumb-item
                    v-if="!$route.params.type || $route.params.type == 'kzzt'"
                    >考证专题</el-breadcrumb-item
                >
                <el-breadcrumb-item v-else-if="$route.params.type == 'scsp'"
                    >实操视频</el-breadcrumb-item
                >
                <el-breadcrumb-item v-else-if="$route.params.type == 'kztk'"
                    >考证题库</el-breadcrumb-item
                >
                <el-breadcrumb-item v-else-if="$route.params.type == 'mdcs'"
                    >秒懂财税</el-breadcrumb-item
                >
                <el-breadcrumb-item v-else-if="$route.params.type == 'sckc'"
                    >实操视频</el-breadcrumb-item
                >
                <el-breadcrumb-item v-else-if="$route.params.type == 'vipzjkc'"
                    >全站通会员专属课程</el-breadcrumb-item
                >
            </el-breadcrumb>
        </div>
        <div class="select-type">
            <div class="st-t">
                <div class="label">选择方向：</div>
                <nuxt-link
                    v-for="item in list1"
                    v-show="!item.noShow"
                    :key="item.index"
                    class="st-item"
                    :class="{
                        'st-item-s': $route.params.type == item.pathName,
                    }"
                    :to="`/school/${item.pathName}`"
                >
                    {{ item.name }}
                </nuxt-link>
            </div>
            <div v-if="list2.length > 0" class="st-t">
                <div class="label">选择分类：</div>
                <div
                    v-for="(item, index) in list2"
                    :key="index"
                    class="st-item"
                    :class="{ 'st-item-s': list2Index == index }"
                    @click="chang2(item, index)"
                >
                    {{ item.name }}
                </div>
            </div>
            <div v-if="list3.length > 0" class="st-t">
                <div class="label"></div>
                <div class="st3-list">
                    <div
                        v-for="(item, index) in list3"
                        :key="index"
                        class="st3-item"
                        :class="{ 'st3-item-s': list3Index == index }"
                        @click="chang3(item, index)"
                    >
                        {{ item.name }}
                    </div>
                </div>
            </div>
            <div v-if="$route.params.type == 'kzzt'" class="st-t">
                <div class="label">选择年限：</div>
                <div
                    v-for="(item, index) in yearList"
                    :key="index"
                    class="st-item"
                    :class="{ 'st-item-s': yearIndex == index }"
                    @click="changYear(index)"
                >
                    {{ item.name }}
                </div>
            </div>
        </div>

        <div v-loading="loading" class="data-list">
            <div class="abstract">
                <img
                    src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/xzxy-abstract-bj.png"
                    alt=""
                />
                <div>{{ abstract }}</div>
            </div>
            <video-item
                v-for="item in dataList"
                :key="item.id"
                :item="item"
                :isPay="is_pay"
                @click="goDetails(item)"
                @goNiuZhang="goNiuZhang"
            ></video-item>
        </div>

        <div v-if="dataList.length == 0 && !loading" class="nodata">
            <el-empty :image-size="200" description="敬请期待"></el-empty>
        </div>

        <div class="page">
            <el-pagination
                background
                layout="prev, pager, next"
                :page-size="limit"
                :total="count"
                @current-change="changePage"
            >
            </el-pagination>
        </div>

        <el-dialog title="支付小竹叶" :visible.sync="payShow" width="408px">
            <div class="pay-dialog">
                <div v-if="payMoney != null" class="money">
                    {{ payMoney.money }}
                </div>
                <div class="money-text">小竹叶</div>
                <div v-if="userInfo != null" class="cell">
                    当前小竹叶：{{ userInfo.money }}，
                    <el-popover placement="bottom" width="126" trigger="hover">
                        <div class="app-code">
                            <img
                                src="~/assets/images/index/app_code.png"
                                alt="小竹财税APP"
                            />
                        </div>
                        <span slot="reference">下载APP</span>
                    </el-popover>
                    去充值
                </div>
                <div class="cell">
                    温馨提示：充值会员可以免费观看，
                    <el-popover placement="bottom" width="126" trigger="hover">
                        <div class="app-code">
                            <img
                                src="~/assets/images/index/app_code.png"
                                alt="小竹财税APP"
                            />
                        </div>
                        <span slot="reference">下载APP</span>
                    </el-popover>
                    去充值
                </div>
                <div class="but">
                    <el-button
                        type="primary"
                        class="but-pay"
                        round
                        @click="payKC"
                        >确定支付</el-button
                    >
                </div>
            </div>
        </el-dialog>

        <!-- 浮动弹窗 -->
        <no-ssr>
            <!-- <dynamicPopUps></dynamicPopUps> -->
            <div v-if="sbshow" class="sb-showHuoDongModel">
                <div>
                    <img
                        src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/1306.png"
                        alt=""
                        @click="set_payVipShow(true)"
                    />
                    <i class="el-icon-close" @click.stop="sbshow = false"></i>
                </div>
            </div>
        </no-ssr>
    </div>
</template>

<script>
// 组件
import videoItem from "@/components/school/videoItem";

// api
import {
    getCateListV1,
    getShoolCate,
    getCollegeList,
    getVipCollegeList,
    getSchoolcourseList,
    schoolcourseOpencourse,
    schoolcourseGetlistinfo,
    getlistinfo,
    get_paycourselist,
} from "@/assets/api/schoolApi.js";

import { getanalysedata } from "@/assets/api/indexApi.js";

import introduce from "@/assets/json/introduce.json";

import { mapState, mapMutations, mapActions } from "vuex";
import { goTop, goTopSmooth } from "@/assets/utils/utils";
import dynamicPopUps from "@/components/index/dynamicPopUps.vue";
export default {
    components: {
        videoItem,
        dynamicPopUps,
    },
    async asyncData({ params }) {
        let data = {
            dataList: [],
            count: 0,
        };

        let getParems = {};
        let res = null;
        if (params.type == "kzzt") {
            getParems = { type: 3, page: 1, limit: 24, kz_type: "3" };
        } else if (params.type == "sckc") {
            getParems = { type: 4, page: 1, limit: 24, sc_type: "100" };
        } else if (params.type == "mdcs") {
            getParems = { type: 4, page: 1, limit: 24, md_type: "0" };
        } else if (params.type == "vipzjkc") {
            getParems = { type: 1, page: 1, limit: 24 };
            // const res = await getVipCollegeList({});
            // if (res.code == 1) {
            //     data.dataList = res.data.data;
            //     data.count = res.data.count;
            // }
            // return data;
        }

        res = await getCollegeList(getParems);
        if (res.code == 1) {
            data.dataList = res.data.data;
            data.count = res.data.count;
        }

        return data;
    },
    head() {
        return {
            title: "小竹财税学院-【小竹财税平台】",
            meta: [
                {
                    hid: "description",
                    name: "description",
                    content: this.abstract,
                },
                {
                    hid: "keywords",
                    name: "keywords",
                    content: "小竹财税学院,小竹学院",
                },
            ],
        };
    },
    layout: "home",
    data() {
        return {
            list2Index: 0,
            list2: [],

            list3Index: 0,
            list3: [],

            yearList: [
                { name: "全部", value: "" },
                { name: "2024", value: "2024" },
                { name: "2023", value: "2023" },
                // { name: "2022", value: "2022" },
            ],
            yearIndex: 0,

            cate: [],

            // dataList: [],
            // count: 0,
            page: 1,
            limit: 24,

            payShow: false,
            payMoney: null,
            loading: false,
            sbshow: false,

            is_pay: 0
        };
    },
    created() {},
    mounted() {
        // this.test = this.$store.state.common.test
        if (this.$route.query.index) this.setmenuIndex(this.$route.query.index);
        else this.setmenuIndex("60");
        // if (this.dataList.length == 0)
        this.init();
        this.$nextTick(() => {
            goTopSmooth();
        });
    },
    computed: {
        // 一级菜单下标和数据均使用公有  vuex common
        ...mapState("common", {
            menuIndex: (state) => state.menuIndex,
            list1: (state) => state.menuList[3].list,
            userInfo: (state) => state.userInfo,
        }),
        abstract: function () {
            console.log(
                "school" + this.$route.params.type.replace(".html", "")
            );
            return introduce[
                "school" + this.$route.params.type.replace(".html", "")
            ];
        },
    },
    watch: {
        // $route(to, from) {
        //     try {
        //         if (window && to) {
        //             this.page = 1;
        //             // this.setmenuIndex(to.query.index);
        //             this.init();
        //         }
        //     } catch (error) {}
        // },
        // menuIndex(n, o) {
        //     if (window && n) this.init();
        // },
    },
    methods: {
        ...mapMutations("common", [
            "setmenuIndex",
            "setloginShow",
            "set_payVipShow",
        ]),

        ...mapActions("common", ["getUserInfo"]),

        init() {
            // let menuIndex = parseInt(this.menuIndex);
            // if (menuIndex < 50) {
            // } else {
            //     this.chang1(this.list1[menuIndex % 10]);
            // }
            if (this.$route.params.type == "kzzt") {
                this.setmenuIndex("61");
                this.chang1(this.list1[1]);
            } else if (this.$route.params.type == "sckc") {
                this.setmenuIndex("64");
                this.chang1(this.list1[4]);
                this.get_paycourselist();
            } else if (this.$route.params.type == "mdcs") {
                this.setmenuIndex("65");
                this.chang1(this.list1[5]);
            } else if (this.$route.params.type == "vipzjkc") {
                getanalysedata({
                    m_id: 8,
                    type: 1,
                    code: "PF4",
                    describe: "全站通会员专属课程",
                });
            }
        },

        async get_paycourselist() {
            const res = await get_paycourselist({});
            if (res.code == 1) {
                this.is_pay = res.data.is_pay;
            }
        },

        // 点击一级菜单
        clickOne(item) {
            this.page = 1;
            // 修改导航栏选中
            this.setmenuIndex(item.index);
        },

        // 获取一级数据
        chang1(item) {
            this.list2Index = 0;
            this.list3Index = 0;
            this.list3 = [];
            if (item.pid) {
                switch (item.pid) {
                    case 1: // 财税热点
                        this.getCateListV1(item);

                        break;
                    case 2: // 秒懂财税
                        this.getCateListV1(item);
                        getanalysedata({
                            m_id: 8,
                            type: 1,
                            code: "PF2",
                            describe: "秒懂财税-全部",
                        });
                        break;
                    case 3: // 考证专题
                        this.getCateListV1(item);
                        getanalysedata({
                            m_id: 8,
                            type: 1,
                            code: "PF1",
                            describe: "考证专题-全部-全部",
                        });
                        break;
                    case 100: // 实操课程
                        this.getCateListV1(item);
                        getanalysedata({
                            m_id: 8,
                            type: 1,
                            code: "PF3",
                            describe: "实操课程-全部",
                        });
                        break;
                }
            } else {
                this.getShoolCate(item);
            }
            // if (this.$route.params.type == "vipzjkc") {

            // }
        },

        chang2(item, index) {
            if (this.list2Index == index) return;
            this.page = 1;
            this.list2Index = index;
            if (item.children && item.children.length > 0) {
                this.list3 = item.children;
                this.list3Index = 0;
            } else {
                this.list3 = [];
            }

            let menuIndex = parseInt(this.menuIndex);

            this.behavioralRecords();

            if (this.list1[menuIndex % 10].pid)
                this.getCollegeList(item, this.list1[menuIndex % 10].pid);
            else this.getSchoolcourseList();
        },

        chang3(item, index) {
            if (this.list3Index == index) return;
            this.page = 1;
            this.list3Index = index;

            let menuIndex = parseInt(this.menuIndex);

            this.behavioralRecords();

            this.getCollegeList(item, this.list1[menuIndex % 10].pid);
        },

        changYear(index) {
            if (this.yearIndex == index) return;
            this.page = 1;
            this.yearIndex = index;
            let menuIndex = parseInt(this.menuIndex);

            this.behavioralRecords();

            this.getCollegeList(
                this.list2[this.list2Index],
                this.list1[menuIndex % 10].pid
            );
        },

        // 用户分析
        behavioralRecords() {
            switch (this.$route.params.type) {
                case "kzzt":
                    getanalysedata({
                        m_id: 8,
                        type: 1,
                        code: "PF1",
                        describe:
                            "考证专题-" +
                            this.list2[this.list2Index].name +
                            "-" +
                            this.yearList[this.yearIndex].name,
                    });
                    break;
                case "mdcs":
                    let describe = this.list2[this.list2Index].name;
                    if (this.list3.length > 0)
                        describe += "-" + this.list3[this.list3Index].name;
                    getanalysedata({
                        m_id: 8,
                        type: 1,
                        code: "PF2",
                        describe: "秒懂财税-" + describe,
                    });
                    break;
                case "sckc":
                    getanalysedata({
                        m_id: 8,
                        type: 1,
                        code: "PF3",
                        describe:
                            "实操课程-" + this.list2[this.list2Index].name,
                    });
                    break;
            }
        },

        // 分类获取
        async getCateListV1(item) {
            this.loading = true;
            const res = await getCateListV1({
                pid: item.pid,
            });
            if (res.code == 1) {
                this.list2 = res.data;
                this.getCollegeList(this.list2[0], item.pid);
            }
        },

        // 获取视频分类
        async getCollegeList(item, type) {
            this.loading = true;
            let parems = {
                type: type,
                page: this.page,
                limit: this.limit,
            };
            if (type == 1) parems.rd_type = item.id;
            if (type == 2) parems.md_type = item.id == "2" ? "0" : item.id;
            if (type == 3) {
                parems.kz_type = item.id;
                if (this.yearList[this.yearIndex].value)
                    parems.year = this.yearList[this.yearIndex].value;
            }
            if (type == 100) {
                parems.sc_type = item.id;
                parems.type = 4;
            }

            const res = await getCollegeList(parems);
            this.loading = false;
            this.dataList = [];
            if (res.code == 1) {
                this.dataList = res.data.data;
                this.count = res.data.count;
            }
        },

        // 获取实操视频 和 考证题库分类
        async getShoolCate(e) {
            this.loading = true;
            if (this.cate.length == 0) {
                const res = await getShoolCate({});
                if (res.code == 1) {
                    this.cate = res.data;
                    this.list2 = [];

                    for (let i = 0; i < res.data.length; i++) {
                        if (res.data[i].type == e.type) {
                            this.list2.push(res.data[i]);
                        }
                    }
                }
            } else {
                this.list2 = [];
                for (let i = 0; i < this.cate.length; i++) {
                    if (this.cate[i].type == e.type) {
                        this.list2.push(this.cate[i]);
                    }
                }
            }

            this.getSchoolcourseList();
        },

        // 获取牛账视频
        async getSchoolcourseList() {
            this.loading = true;
            const res = await getSchoolcourseList({
                cid: this.list2[this.list2Index].id,
                page: this.page,
                limit: this.limit,
            });
            this.loading = false;
            this.dataList = [];
            if (res.code == 1) {
                this.count = res.data.count;
                this.dataList = res.data.data;
            }
        },

        // 点击分页
        changePage(e) {
            this.page = e;
            if (this.list3.length > 0) {
                var item = this.list3[this.list3Index];
            } else if (this.list2.length > 0) {
                var item = this.list2[this.list2Index];
            }
            let menuIndex = parseInt(this.menuIndex);
            goTop(0);
            console.log(this.list3, this.list2);
            if (this.list1[menuIndex % 10].pid)
                this.getCollegeList(item, this.list1[menuIndex % 10].pid);
            else this.getSchoolcourseList();
        },

        // 前往牛帐
        // 12.27 牛账已经没了 已经结束了
        // 24.9.14 牛账他喵的又回来了
        async goNiuZhang(item, type) {
            if (!this.userInfo) {
                this.setloginShow(true);
                return;
            }
            // 因为牛帐到期临时添加的判断
            // let userCreatetime = new Date(this.userInfo.createtime * 1000);
            // let compareDate = new Date("2023-08-26T00:00:00");
            // if (userCreatetime > compareDate) {
            //     this.$alert("该模块正在升级中，请耐心等待", "提示", {
            //         confirmButtonText: "确定",
            //     });
            //     return;
            // }
            if (type == "tk") {
                // this.$alert("该模块正在升级中，请耐心等待", "提示", {
                //     confirmButtonText: "确定",
                // });
                // return
                // if (!this.userInfo) {
                //     this.setloginShow(true);
                //     this.$message({
                //         message: "请登录",
                //         type: "warning",
                //     });
                //     return;
                // }
                // if (this.userInfo.is_vip == 0) {
                //     this.goNiuZhang(item, "gm");
                //     return;
                // }
                const res1 = await schoolcourseOpencourse({
                    id: item.id,
                });
                if (res1.code == 1 || res1.code == 2) {
                    const res2 = await schoolcourseGetlistinfo({
                        id: item.id,
                    });
                    if (res2.code == 1) {
                        // if (res2.data.v_url) window.open(res2.data.v_url);
                        // else if (res2.data.url) window.open(res2.data.url);
                        window.open(res2.data);
                    } else {
                        this.$message({
                            message: res2.msg,
                            type: "warning",
                        });
                    }
                }
            } else if (type == "gm") {
                // console.log('购买')
                // this.getUserInfo()
                // this.payMoney = item;
                // this.payShow = true;
                this.$alert("该模块正在升级中，请耐心等待", "提示", {
                    confirmButtonText: "确定",
                });
                return;
            } else if (type == "sz") {
                // 实战
                // vip先就行购买操作
                if (item.is_vip != 0 && item.is_pay == 0) {
                    var res1 = await schoolcourseOpencourse({
                        id: item.id,
                    });
                } else {
                    var res1 = { code: 1 };
                }
                if (res1.code == 1 || res1.code == 2) {
                    const res2 = await schoolcourseGetlistinfo({
                        id: item.id,
                    });
                    if (res2.code == 20200) {
                        window.open(res2.data.url);
                    } else {
                        this.$message({
                            message: res2.msg,
                            type: "warning",
                        });
                    }
                }
            } else if (type == "st") {
                // const res2 = await getlistinfo({
                //     id: item.id,
                // });
                // if (res2.code == 1) {
                //     window.open(res2.data);
                // }
                this.$alert("该模块正在升级中，请耐心等待", "提示", {
                    confirmButtonText: "确定",
                });
                return;
            }
        },

        // 购买视频
        async payKC() {
            const res = await schoolcourseOpencourse({
                id: this.payMoney.id,
            });
            if (res.code == 1) {
                this.getUserInfo();
                this.$message({
                    message: "购买成功",
                    type: "success",
                });
                this.payShow = false;
                this.getSchoolcourseList();
            }
        },

        go(path) {
            this.$router.push({ path: path });
        },

        goDetails(item) {
            switch (this.$route.params.type) {
                case "kzzt":
                    // if (!this.userInfo) {
                    //     this.setloginShow(true);
                    //     this.$message({
                    //         message: "请登录",
                    //         type: "warning",
                    //     });
                    //     return;
                    // }
                    // if (item.ptype == 21 && this.userInfo.is_vip == 0) {
                    //     this.$message({
                    //         message: `该课程 <a target="_blank" href='${window.location.origin}/myvip?vip=0'>前往购买会员</a>`,
                    //         type: "warning",
                    //         dangerouslyUseHTMLString: true,
                    //     });
                    //     return;
                    // }
                    // if (item.ptype == 22 && (this.userInfo.is_vip == 0 || this.userInfo.is_vip == 1 || this.userInfo.is_vip == 2)) {
                    //     this.$message({
                    //         message: "该课程 <a href='/myvip?vip=1'>前往购买会员</a>",
                    //         type: "warning",
                    //         dangerouslyUseHTMLString: true,
                    //     });
                    //     return;
                    // }
                    if (item.is_login == "1" && !this.userInfo) {
                        window.localStorage.removeItem("userInfo");
                        window.location.href =
                            "/login?url=" +
                            window.location.pathname +
                            window.location.search;
                        return;
                    }
                    this.goUrlBlank({
                        path: `/school/Certificate/${item.id}/${item.section[0].id}.html`,
                    });
                    break;
                case "sckc":
                    if (!this.userInfo) {
                        this.$confirm("该功能需要登录后使用", "提示", {
                            confirmButtonText: "去登录",
                            cancelButtonText: "再看看",
                        })
                            .then(() => {
                                this.$router.push({
                                    path: "/login",
                                    query: {
                                        url:
                                            window.location.pathname +
                                            window.location.search,
                                    },
                                });
                            })
                            .catch(() => {});
                        return;
                    }
                    if (item.pptype == 4 && item.type == 111) {
                        this.goUrlBlank({
                            path: "/school/feescourses/" + item.id + "",
                        });
                    } else
                        this.goUrlBlank({
                            path: "/school/sckcdetails/" + item.id + "",
                        });
                    break;
                case "vipzjkc":
                    if (!this.userInfo) {
                        this.$confirm("该功能需要登录后使用", "提示", {
                            confirmButtonText: "去登录",
                            cancelButtonText: "再看看",
                        })
                            .then(() => {
                                this.$router.push({
                                    path: "/login",
                                    query: {
                                        url:
                                            window.location.pathname +
                                            window.location.search,
                                    },
                                });
                            })
                            .catch(() => {});
                        return;
                    }
                    if (this.userInfo.is_gpt_vip == 0) {
                        // this.$confirm("该功能为会员专享功能", "提示", {
                        //     confirmButtonText: "开通会员",
                        //     cancelButtonText: "再看看",
                        // })
                        //     .then(() => {
                        //         this.set_payVipShow(true);
                        //     })
                        //     .catch(() => {});
                        this.sbshow = true;
                        return;
                    }
                    if (item.course_type == 1)
                        this.goUrlBlank({
                            path: "/school/hot/" + item.id + "",
                        });
                    else if (item.course_type == 2) {
                        this.goNiuZhang(item, "tk");
                    }
                    break;
                // case "54":
                //     this.goUrlBlank({
                //         path: "/Hot",
                //         query: { id: item.id },
                //     });
                //     break;
                case "mdcs":
                    this.goUrlBlank({
                        path: "/school/seefat/" + item.id + ".html",
                    });
                    break;
            }
        },
        goUrlBlank(data) {
            let routeData = this.$router.resolve(data);
            window.open(routeData.href, "_blank");
        },
    },
};
</script>

<style lang="scss" scoped>
@import "@/assets/static/payDialog.scss";
.select-type,
.data-list {
    width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
}

.data-list {
    width: 1226px;
    margin: 13px auto;
    display: flex;
    flex-wrap: wrap;
}

.select-type {
    // height: 156px;
    border-radius: 10px 10px 10px 10px;
    background: #ffffff;
    padding: 10px 30px;

    .st3-list {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }

    .st-t {
        display: flex;
        align-items: center;
        padding: 15px 0;

        .label {
            font-size: 14px;
            color: #888888;
            width: 72px;
            min-width: 72px;
        }

        .st-item {
            background: #ffffff;
            border-radius: 4px;
            font-size: 14px;
            line-height: 35px;
            color: #333333;
            padding: 0 15px;
            margin: 0 8px;
            cursor: pointer;
        }

        .st-item-s {
            background: #eaf4ff;
            color: #1c87f3;
        }

        .st3-item {
            background: #ffffff;
            border-radius: 4px;
            font-size: 14px;
            line-height: 35px;
            color: #333333;
            padding: 0 15px;
            margin: 0 8px;
            cursor: pointer;
        }

        .st3-item-s {
            color: #1c87f3;
        }
    }
}

.school {
    padding-top: 18px;
    position: relative;
}

.bj {
    height: 446px;
    background: linear-gradient(
        180deg,
        #eaf1ff 0%,
        rgba(240, 240, 242, 0) 100%
    );
    position: absolute;
    width: 100%;
    top: 0;
    z-index: 0;
}

.page {
    padding-top: 13px;
    padding-bottom: 63px;
    display: flex;
    justify-content: center;
}

.app-code {
    img {
        width: 150px;
        height: 150px;
    }
}

.breadcrumb {
    width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
    padding-bottom: 19px;
}
.abstract {
    width: 1200px;
    margin: 0 auto;
    height: 117px;
    position: relative;
    font-size: 12px;
    color: #759cc2;
    line-height: 17px;
    padding: 26px 0 0 27px;
    img {
        position: absolute;
        left: 0;
        top: 0;
        width: 1200px;
        height: 117px;
    }
    div {
        position: relative;
        z-index: 10;
        width: 949px;
        font-size: 14px;
        color: #7b9bbf;
        line-height: 24px;
    }
}

.sb-showHuoDongModel {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    > div {
        position: relative;
        cursor: pointer;
        i {
            color: #ffffff;
            font-size: 34px;
            position: absolute;
            top: 18px;
            right: 15px;
        }
    }
    img {
        width: 387px;
        height: auto;
    }
}
</style>

<style>
.el-popover {
    min-width: 100px !important;
}
</style>